{extend name="public/base" /}
{block name="pjax_container"}
<?php
    $titleTypeName = '工龄分配置';
?>
<style>
[id^="checkbox-"] + label {
 background-color: #FFF;
 padding: 11px 9px;
 border-radius: 7px;
 display: inline-block;
 position: relative;
 margin-right: 30px;
 background: #F7836D;
 width: 88px;
 height: 13px;
 box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4);
}

[id^="checkbox-"] + label:before {
 content: ' ';
 position: absolute;
 background: #FFF;
 top: 0px;
 z-index: 99999;
 left: 0px;
 width: 24px;
 color: #FFF;
 height: 35px;
 border-radius: 7px;
 box-shadow: 0 0 1px rgba(0,0,0,0.6);
}

[id^="checkbox-"] + label:after {
 content: '禁止';
 position: absolute;
 top: 7px;
 left: 37px;
 font-size: 1.2em;
 color: white;
 font-weight: bold;
 left: 8px;
 padding: 5px;
 top: 4px;
 border-radius: 100px;
}

[id^="checkbox-"]:checked + label {
 background: #67A5DF;
 box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);
}

[id^="checkbox-"]:checked + label:after {
 content: '允许';
 left: 6px;
}

[id^="checkbox-"]:checked + label:before {
 content: ' ';
 position: absolute;
 z-index: 99999;
 left: 82px;
}


[id^="checkbox-"] + label:after {
 left: 35px; 
} 

.radio +label{
position: relative;
display: inline-block;
z-index: 999;
width: 12px;
height: 25px;
padding: 3px 29px;
}

.radio+label:before{
 content:"";
 color:#fff; 
 width: 20px;
 height: 20px;
 background: #777980;
 border-radius: 15px;
 position: absolute;
 top: 4px;
 left: 4px;
 display:block;
 box-shadow: 0px 0px 3px #A19797;
}
.radio:checked+label:before{
content:"";
background: #1caf9a;
}
.radio+label:after{
 content: attr(title);
 width: 8px;
 height: 8px;
 display:block;
 border: 3px solid #F7F9F9;
position: absolute;
top: 7px;
left: 7px;
border-radius: 7px;
background: #777980;
box-shadow: 0px 0px 3px #F2EBEB;
}
.radio:checked+label:after{
background: #1caf9a;
}
.glyphicon{
    color: #67A5DF;
    cursor: pointer;
}
.tops{
    border: 1px solid #67A5df;
width: 310px;
   padding: 5px;
   position: absolute;
   margin-left: 20px;
 display: none;
   top: 0;
   
   border-radius: 10px;
  
}
.form-group{
    position: relative;
}
input{
    text-align: center;
}
 
 
    .content-header>.breadcrumb>li {
        color: #999;
    }

    .content-header>.breadcrumb>.active {
        color: #666;
    }

    .content-header {
        height: 51px;

    }

    .btn-primary {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 5px 10px;
    }

    .box-primary {
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }

    .btn-primary:hover {
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }

    .delete-one {
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }

    .sreachs {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }
    .nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 16px;
}
.form-control{
border-radius: 10px;
}
.tab-content {
    margin: 20px 0 40px;
    border-bottom: 10px solid transparent;
    padding-bottom: 40px;
}
.box-footer{
    border-top: 1px solid transparent;
}

.magic-radio,
.magic-checkbox {
	position: absolute;
	display: none;
}
 

 
.magic-radio + label,
.magic-checkbox + label {
	position: relative;
	display: block;
	padding-left: 30px;
	cursor: pointer;
 
}
 
.magic-radio + label:before,
.magic-checkbox + label:before {
	position: absolute;
	top: 0px;
	left: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
        margin-top: 5px;
	content: '';
	border: 1px solid #c0c0c0;
}
.magic-checkbox + label:before{
    	top: -5px;
}
.magic-radio + label:after,
  .magic-checkbox + label:after {
	position: absolute;
	display: none;
	content: '';
        margin-top: 5px;
}


 
.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
	display: block;
}
.magic-radio + label:before {
	border-radius: 50%;
}
.magic-radio + label:after {
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3e97eb;
}
.magic-radio:checked + label:before {
	border: 1px solid #3e97eb;
}
.magic-radio:checked[disabled] + label:before {
	border: 1px solid #c9e2f9;
}

.magic-checkbox + label:before {
	border-radius: 3px;
}
.magic-checkbox + label:after {
	top: 2px;
	left: 7px;
	box-sizing: border-box;
	width: 6px;
	height: 12px;
	transform: rotate(45deg);
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	border-top: 0;
	border-left: 0;
}
.magic-checkbox + label:after {
    top: -2px;
}
.magic-checkbox:checked + label:before {
    border: #1890FF;
    background: #1890FF;
}
.magic-checkbox:checked[disabled] + label:before {
	border: #1890FF;
	background: #1890FF;
}
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>积分配置</li>
        <li class="active">{$titleTypeName}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="/{$Think.MODULE_NAME}/{$Think.CONTROLLER_NAME}/index_edit" onsubmit="return false" >
                <div class="nav-tabs-custom">
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">


                            <div class="form-group">
                                <label class="col-sm-2 control-label">工龄分配置</label>
                                <div class="col-sm-3" style="display: flex;">
                                <input type="radio" class="magic-radio" id="working_age_type2" name="working_age_type" lay-skin="primary" value="0" {if
                                    condition="!isset($info['working_age_type']) || $info['working_age_type']==0" }checked{/if} class="minimal"/>  <label for="working_age_type2" class="checkbox-inline ">按月结算</label>
                                <input  type="radio" class="magic-radio" id="working_age_type" lay-skin="primary" name="working_age_type" value="1" {if
                                    condition="isset($info['working_age_type']) && $info['working_age_type']==1" }checked{/if} class="minimal"/> <label style="margin-left: 15px;" class="checkbox-inline" for="working_age_type"> 按日结算</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-2">
                                    <input class="form-control" type="number" name="working_age_integral" value="{$info['working_age_integral']|default=''}" placeholder="">
                                </div>
                               <div class="col-sm-3">
                                    <i class="glyphicon glyphicon-question-sign"></i>
                                    <p class="tops">提示：系统将从员工入职月到工龄分截止月期间计算，不足整月，都默认按照满月计算。</p>
                               </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label">工龄分截止</label>
                                <div class="col-sm-2">
                                    <input class="form-control timepicker" name="working_age_end" value="{$info['working_age_end']|default=''}" placeholder="">
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-2">
                            <div class="btn-group pull-right">
                                <button type="submit" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</section>
<script type="application/javascript">
    $(document).ready(function () {
        /*ajax页面加载icheck，有该控件的页面才需要*/
        $(".select2").select2({language:"zh-CN"});

        var now = new Date();
        var currentYear=now.getFullYear();
        var startDate = new Date(currentYear,0,1);
        var endDate = new Date(currentYear+1,0,1);
        $('.timepicker').datetimepicker({
            format: "{$timepickerFormat | default='YYYY-MM-DD'}",   //YYYY-MM-DD HH:mm:ss
            locale: moment.locale('zh-cn'),
            // minDate:startDate,
            // maxDate : endDate
        });
    })

    let glyphicon = document.querySelector(".glyphicon");
    
        let tops = document.querySelector(".tops");
    glyphicon.onmouseover = function(){
        tops.style.display= "block";
        
    }
    glyphicon.onmouseout = function(){
        tops.style.display = "none";
    }
</script>
{/block}
